<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <link href='../../static/calendar/css/fullcalendar.min.css' rel='stylesheet'/>
    <link href='../../static/calendar/css/fullcalendar.print.min.css' rel='stylesheet' media='print'/>
    <script src='../../static/calendar/js/moment.min.js'></script>
    <script src='../../static/calendar/js/jquery.min.js'></script>
    <script src='../../static/calendar/js/jquery-ui.min.js'></script>
    <script src='../../static/calendar/css/fullcalendar.min.js'></script>
    <script src='../../static/calendar/js/zh-cn.js'></script>
    <script>

        $(document).ready(function () {


            /* initialize the external events
            -----------------------------------------------------------------*/

            $('#external-events .fc-event').each(function () {

                // store data so the calendar knows to render an event upon drop
                $(this).data('event', {
                    title: $.trim($(this).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                });

                // make the event draggable using jQuery UI
                $(this).draggable({
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                });

            });


            /* initialize the calendar
            -----------------------------------------------------------------*/

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                locale: 'zh-cn',
                editable: true,
                droppable: true, // this allows things to be dropped onto the calendar
                drop: function () {
                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $(this).remove();
                    }
                }
            });


        });

    </script>
    <style>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
        }

        #wrap {
            width: 1100px;
            margin: 0 auto;
        }

        #external-events {
            float: left;
            width: 150px;
            padding: 0 10px;
            border: 1px solid #ccc;
            background: #eee;
            text-align: left;
        }

        #external-events h4 {
            font-size: 16px;
            margin-top: 0;
            padding-top: 1em;
        }

        #external-events .fc-event {
            margin: 10px 0;
            cursor: pointer;
        }

        #external-events p {
            margin: 1.5em 0;
            font-size: 11px;
            color: #666;
        }

        #external-events p input {
            margin: 0;
            vertical-align: middle;
        }

        #calendar {
            float: right;
            width: 900px;
        }

    </style>
</head>
<body>
<div id='wrap'>

    <div id='external-events'>
        <h4>Draggable Events</h4>
        <div class='fc-event'>My Event 1</div>
        <div class='fc-event'>My Event 2</div>
        <div class='fc-event'>My Event 3</div>
        <div class='fc-event'>My Event 4</div>
        <div class='fc-event'>My Event 5</div>
        <p>
            <input type='checkbox' id='drop-remove'/>
            <label for='drop-remove'>remove after drop</label>
        </p>
    </div>

    <div id='calendar'></div>

    <div style='clear:both'></div>

</div>
</body>
</html>
